<template>
  <div>
    <el-container>
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">反馈管理</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">用户反馈工单</a></el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button type="primary">刷新</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </el-container>
    <!-- <div class="right">
      <el-button style="color: white" color="#1abc9c">反馈处理</el-button>
    </div> -->
    <div class="message">
      <img class="photo" src="../../public/major.png" alt="" />
      <span>详细信息</span>
    </div>
    <el-table :show-header="false" :data="tableData" border>
      <el-table-column width="150" prop="a"></el-table-column>
      <el-table-column prop="b"></el-table-column>
      <el-table-column width="150" prop="c"></el-table-column>
      <el-table-column prop="d"></el-table-column>
    </el-table>
  </div>
</template>
  
  <script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { detailsList } from "../http/api";
import { useRoute, useRouter } from "vue-router";
const router: any = useRouter();
const route: any = useRoute();

//获取反馈详情
let transmit = reactive({ id: route.params.id });
const state: any = reactive({ formData: [] });
let tableData: any = reactive([
  {
    a: "反馈单号",
    b: state.formData.id,
    c: "状态",
    d: state.formData.feedbackStatus,
  },
  {
    a: "反馈用户",
    b: state.formData.userName,
    c: "手机号码",
    d: state.formData.userPhone,
  },
  {
    a: "反馈内容",
    b: state.formData.info,
    c: "反馈图片",
    d: state.formData.feedbackPicture,
  },
]);
//  刚创建时state,tableData为空，需监听数据变化
watch(
  () => state.formData,
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    tableData[0].b = newValue.id;
    tableData[0].d = newValue.feedbackStatus;
    tableData[1].b = newValue.userName;
    tableData[1].d = newValue.userPhone;
    tableData[2].b = newValue.info;
    tableData[2].d = newValue.feedbackPicture;
  }
);
const getDetails = detailsList(transmit)
  .then((res: any) => {
    // console.log(res);
    if (res.code === 200) {
      state.formData = res.data.list[0];
      // console.log("66666666666", state.formData);
    }
  })
  .catch((err) => {
    // console.log(err);
  });
const back = () => {
  router.back();
};
</script>
  <style scoped>
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  margin: 10px 0;
}
.right {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
  margin-top: 10px;
}
.message {
  display: flex;
  align-items: center;
  padding-left: 15px;
  margin: 10px 0 20px 0;
}
.photo {
  width: 24px;
}
</style>